<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="vue/vue.js"></script>
		<script src="vue/vue-router.js"></script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.header{
				width: 100%;
				height: 200px;
				background-color: deeppink;
			}
			.con{
				height: 462px;
				display: flex;
			}
			.leftBox{
				flex: 2;
				background-color: greenyellow;
			}
			.mainBox{
				flex: 8;
				background-color: aqua;
			}
			
		</style>
	</head>
	<body>
		<div id="app">
			<router-view></router-view>
			<!--使用flex布局-->
			<div class="con">
				<router-view name="left"></router-view>
				<router-view name="main"></router-view>
			</div>
			
		</div>
		<script type="text/javascript">
			//定义组件
			var header = {
				template: "<h2 class='header'>头部导航</h2>"
			}
			var leftBox = {
				template: "<h2 class='leftBox'>侧边栏区域</h2>"
			}
			var mainBox = {
				template: "<h2 class='mainBox'>主题内容区域</h2>"
			}
			//创建路由
			var routerObj = new VueRouter({
				routes: [
					{
						path: '/', 
						//components 加了s
						components: {
							default: header,
							left: leftBox,
							main: mainBox
						}
					}
				]
			})
			//创建vue实例对象
			var vm = new Vue({
				el: '#app',
				data:{},
				methods:{},
				router:routerObj
			})
		</script>
	</body>
</html>
